<template><div>
    <headerComponent v-bind:title="data.title" ></headerComponent> 
    <containerComponent  v-bind:containerFull="data.containerFull"  > 
      <div v-if="data.activeNumber == 0"> 
            <rlitemComponent href="/list?type=in_theaters" lable="In theaters" ></rlitemComponent>
            <rlitemComponent href="/list?type=coming_soon"  lable="Coming soon"></rlitemComponent>
            <rlitemComponent href="/list?type=top250"  lable="Top 250"></rlitemComponent>
      </div>
      <div v-if="data.activeNumber == 1">
              <div class="weui-search-bar" v-on:click.stop="isSearch = true" v-bind:class="{'weui-search-bar_focusing' : isSearch}" >
                  <form class="weui-search-bar__form">
                      <div class="weui-search-bar__box">
                          <i class="weui-icon-search"></i>
                          <input class="weui-search-bar__input"  placeholder="搜索" required="" type="search" v-model="searchStr" >
                          <a  class="weui-icon-clear" v-on:click.stop="searchStr = ''"></a>
                      </div>
                      <label class="weui-search-bar__label" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                          <i class="weui-icon-search"></i>
                          <span>搜索</span>
                      </label>
                  </form>
                  <a class="weui-search-bar__cancel-btn"  ><span v-on:click.stop="isSearch = !isSearch;searchItems= ''" >取消</span></a>
              </div>
              <div class="weui-cells searchbar-result"  style="display: none; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);"  v-show="isSearch" >
                        <div class="weui-cell weui-cell_access" v-for="item in searchItems" v-on:click.stop="go('/subject?id=' + item.id)" >
                              <div class="weui-cell__bd weui-cell_primary">
                                  <p>{{item.title}}</p>
                              </div>
                        </div>
              </div>
      </div>
      <div v-if="data.activeNumber == 2">  
            <div class="weui-panel">
                <div class="weui-panel__hd">
                    Recent comments list:
                </div>
                <div class="weui-panel__bd" >
                           <commentItemComponent v-for="item in comments" :item="item" ></commentItemComponent>
                </div>
            </div>
            <div class="weui-panel">
                <div class="weui-cells__title">
                    I need to make a comment:
                </div>
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label for="" class="weui-label">
                                Nickname:
                            </label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" placeholder="Jack" v-model="comment.nickname" type="text">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label for="" class="weui-label">
                                Website:
                            </label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" v-model="comment.website" placeholder="http://www.tiesec.org/"  type="text">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__bd">
                            <textarea class="weui-textarea" v-model="comment.content" placeholder="blablabla..."
                            rows="3">
                            </textarea>
                            <div class="weui-textarea-counter">
                                <span>
                                    0
                                </span>
                                /200
                            </div>
                        </div>
                    </div>
                    <a href="javascript:;" class="weui-btn weui-btn_default" v-on:click="commentSubmit">
                        SUBMIT
                    </a>
                </div>
            </div>
      </div>
    </containerComponent> 
    <tabbarComponent v-bind:active="Number(data.activeNumber)"></tabbarComponent> 
</div></template> 

<script>
  import routes from '../routes.js';  
  import LocalStorage from '../common/localStorage.module.js'; 
  import common from '../common/common.js'; 
  import reqApi from '../requestApi.js';
  
  import rlitemComponent from '../components/Rlitem.vue'; 
  import headerComponent from '../components/Header.vue';
  import containerComponent from '../components/Container.vue';  
  import tabbarComponent from '../components/Tabbar.vue';  
  import commentItemComponent from '../components/CommentItem.vue';  

  const _localStorage = new LocalStorage.LocalStorage(); 
  Date.prototype.format = common.format;

  export default {
    props: [
        'data'
    ],
    data (){
         return {
                href : '',
                searchStr : '',
                isSearch : false,
                searchItems : [],
                comment : {
                       nickname : "",
                       content : "",
                       website : ""
                },
                comments : []
         }
    },
    watch : {
            searchStr (info) { 
                  let me = this; 
                  $.ajax({ 
                       url : `${reqApi.baseDir}search_data.json`,
                       type : "GET", 
                       data : "json",
                       success : function (data) { 
                               me.searchItems = data.subjects; 
                       }
                  });
            }
    },
    created () {
        if (  Object.keys(_localStorage.data).length !== 0  ) { 
              _localStorage.data.comments.forEach(data => this.comments.push(data));
        }
    },
    methods : {
            commentSubmit () {
                  if (  Object.keys(_localStorage.data).length === 0  ) {   
                          let localData = { comments : [] };
                          localData.comments.push({
                            userNickname : this.comment.nickname,
                            userWebsite : this.comment.website,
                            userComContent : this.comment.content,
                            dateTime : (new Date).format('yyyy-MM-dd h:m:s')
                          });  
                          _localStorage.data = localData; 
                  } else { 
                          let localData = _localStorage.data;
                          localData.comments.push({
                            userNickname : this.comment.nickname,
                            userWebsite : this.comment.website,
                            userComContent : this.comment.content,
                            dateTime : (new Date).format('yyyy-MM-dd h:m:s')
                          }); 
                          _localStorage.data = localData; 
                  }
                  this.comments.push(_localStorage.data.comments[_localStorage.data.comments.length - 1]);
            },
            go (href){ 
                    console.log(href);
                    window.history.pushState(
                      null,
                      routes[href],
                      href
                    )
                    this.$root.currentRoute = href
            }
    },
    components: {
        rlitemComponent,
        headerComponent, 
        containerComponent, 
        tabbarComponent,
        commentItemComponent
    }
  }
</script> 